<template>
<div class="my-card">
  <el-row class="toolbar">
    <DatePicker
      :options="options"
      :getData="getData"
       style="width:50% float:left;"
    >
    </DatePicker>
    <el-button style="float:right" type="primary" @click="exportExcel">导出</el-button>

  </el-row>
  <el-row style="height:200px;">

    <el-col :span="12">
      水泵：
    <el-select v-model="value" :placeholder="options1[0].value">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
    </el-select>
    <div id="pumpPie" ref="e" style="width: 510px;height: 340px;"></div>
      </el-col>
  <el-col :span="6">
     <el-button 
        type="primary" 
        
       >
        各水厂水泵运行时长
      </el-button>
      <div id="bar" ref="b" style="width:300px; height:200px;"></div>
  </el-col>
  <el-col :span="6">
     <el-table
      :data="tableDataPump"
      >
      <el-table-column
        prop="pump"
        label="最长调度水泵"
        width="80">
      </el-table-column>
      <el-table-column
        prop="num"
        label="调度次数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="time"
        label="运行时长">
      </el-table-column>
    </el-table>
  </el-col>
  </el-row>
  <el-table
    :data="dispatchTableData"
     style="width: 96%;display:flex;flex-direction:column;"
    >
      <el-table-column
        prop="time"
        label="时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="waterPumpsInfo"
        label="指令内容"
        width="180">
        <template slot-scope="scope">
            <el-button
                v-for="item in scope.row.waterPumpsInfo"
                :key="item.id"
                type="text"
                size="small">
                {{item.isOpen?1:0}}
            </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="totalFlow"
        label="执行部门"
        width="180">
      </el-table-column>
      <el-table-column
        prop="person"
        label="执行人"
        width="180">
      </el-table-column>
        <el-table-column
        prop="pressures"
        label="执行时长"
        width="180">
      </el-table-column>
      <el-table-column
        prop="pressures"
        label="备注"
        width="180">
      </el-table-column>
    </el-table>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
let myChart = null
let barChart = null
import moment from 'moment'
import DatePicker from '../../components/DatePicker.vue'
import formRequest from './formRequest.js'
import axios from 'axios'

export default {
  components: {
    DatePicker,echarts
  },
  data() {
    return {
      value: '',
      charts: '',
      opinionPie:['石化园区','红浅区','大农业区','输炼地区','乌尔禾区'],
      opinionData:[
        {value:335, name:'石化园区'},
        {value:310, name:'红浅区'},
        {value:234, name:'大农业区'},
        {value:135, name:'输炼地区'},
        {value:548, name:'乌尔禾区'}
      ],
      tableDataPump: [{
          pump:'三坪水厂1',
          num: '20次',
          time: '200h'
        }],
      options1: [{
        value: '三坪水厂',
        label: '三坪水厂'
      }, {
        value: '第五净化水厂',
        label: '第五净化水厂'
      }, {
        value: '第六净化水厂',
        label: '第六净化水厂'
      }, {
        value: '第二净化水厂',
        label: '第二净化水厂'
      },],
      dispatchTableData: [],
      showValue: true,
      options: [
        {
          text: '最近一天',
          range: [moment().subtract(1, 'D').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }, {
          text: '最近一月',
          range: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }, {
          text: '最近一年',
          range: [moment().subtract(1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
      }],
    }
  },
  mounted() {
    let range = [moment().subtract(1, 'D').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];
    // 初始化获取数据
    this.getWaterPumpsHistoryData();
    this.getData(range);
     myChart = echarts.init(this.$refs.e)
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a}<br/>{b}:{c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        x: 'right',
        data:this.opinion
      },
      series: [
        {
          name:'访问来源',
          type:'pie',
          radius:['50%','70%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'blod'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data:this.opinionData
        }
      ]
    }
    if (option && typeof option === 'object') {
      myChart.setOption(option, true)
    }
    barChart = echarts.init(this.$refs.b);
    const barOption = {
    tooltip : {
        trigger: 'axis'
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1#泵','1#泵','1#泵','1#泵','1#泵'],
            axisLine: { lineStyle:{type:"arrow"} },
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'运行时长（h）',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6,],
        }
    ]
};
                    ;
    if (barOption && typeof barOption === 'object') {
      barChart.setOption(barOption, true)
    }
  },

  methods: {
    //改变图标类型
    changeToTable () {
      this.showValue = false
    },
    changeToLine () {
      this.showValue = true
    },
    //初始化日期组件
    getData(range) {
      //获取对应日期的数据
      // axios.get('http://132.232.162.213:8090/control/valve/historyData', {
      //   params: {
      //     valveId: 12345,
      //     startTime: range[0],
      //     endTime: range[1]
      //   }
      // }).then(() => {
      //   console.log('res')
      // }).catch(() => {
      //   console.log('err')
      // })
    },
    //导出表格
    exportExcel () {
      const end = new Date().getTime()
      const start = end - 3600 * 1000 * 24 * 1
      let params = {
        startTime: start,
        endTime: end
      }
      const url = '/dispatch/dispatchOrder/waterpumps/openStatus/historyData';
      formRequest(url, params)
    },
    //获取数据
    getWaterPumpsHistoryData () {
    //   let params = {
    //     startTime: this.dateRange[0],
    //     endTime: this.dateRange[1]
    //   }
    //   this.getWaterPumpsHistoryDataByParams(params)
      let data = [
        {
          id: 12345,
          name: '三坪水厂',
          waterPumpsInfo: [
            {
              id: 12365,
              name: '1#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: true,
                  time: '2018/10/2'
                }
              ]
            },
            {
              id: 12367,
              name: '2#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: false,
                  time: '2018/10/2'
                }
              ]
            }]
        },
        {
          id: 1234544,
          name: '三坪水厂2',
          waterPumpsInfo: [
            {
              id: 12365,
              name: '1#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: true,
                  time: '2018/10/2'
                }
              ]
            },
            {
              id: 12367,
              name: '2#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: false,
                  time: '2018/10/2'
                }
              ]
            }]
        }
      ]
      this.historyTableData = data
    },
  },
}
</script>
<style lang="css" scoped>
.my-card{
  width: 100%;
  background-color: #fff;
  padding: 15px;
  margin: 10px;
  height:750px;
}
.date-picker {
    width: 52%;
    float: left;
}
.toolbar{
  margin-bottom: 20px;
}
</style>